<template>
	<!-- 欧气榜 -->
	<view>
		<view class="topnav">
			<view class="nav">
				<navigator open-type="navigateBack">
					<image src="/static/images/blindbox/back.png"></image>
				</navigator>
			</view>
			<image src="/static/images//ouqibg.png" class="mainbg"></image>
			<view class="todayouqi">今日欧气值:{{airRate.air_num}}≈{{airRate.balance}}心愿币</view>
			<view class="toptitle">
				<view class="toptitle_item" :class="{'active1':active === 0}" @click="active = 0">欧气榜盲盒Top10</view>
				<view class="toptitle_item" :class="{'active2':active === 1}" @click="active = 1">欧皇榜Top30</view>
			</view>
		</view>
		<template v-if="active === 0">
			<view class="title">
				<text>排名</text>
				<text style="margin-left: 48rpx;">盲盒名称</text>
				<text style="margin-left: 48rpx;">盲盒价格</text>
				<text style="margin-left: 38rpx;">欧气值</text>
			</view>
			<view class="list">
				<view class="list_item" v-for="(item1,index1) in rankList" :key="index1" :class="index1 === 0 ? 'bg1' : index1 === 1 ? 'bg2' : index1 === 2 ? 'bg3' : ''">
					<view class="list_item_ranking">
						<text v-if="index1 > 2">{{index1+1}}</text>
						<image src="/static/images/blindbox/goldmedal.png" v-if="index1 === 0"></image>
						<image src="/static/images/blindbox/silvermedal.png" v-if="index1 === 1"></image>
						<image src="/static/images/blindbox/bronzemedal.png" v-if="index1 === 2"></image>
					</view>
					<view class="list_item_name1">
						<image :src="item1.cover_image"></image>
						<text>{{item1.name}}</text>
					</view>
					<view class="list_item_price" style="text-align: center;">￥{{item1.first_blood || 0}}</view>
					<view class="list_item_ouqinum">{{item1.air_total_num || 0}}</view>
					<view class="list_item_open">
						<navigator class="list_item_open_btn" :url="`/pages/index/extractionBlindbox?id=${item1.id}`">去开盒</navigator>
						<text class="list_item_open_num">{{item1.consume_num || 0}}已开盒</text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="title">
				<text>排名</text>
				<text style="margin-left: 48rpx;">用户</text>
				<text style="margin-left: 48rpx;">花费</text>
				<text style="margin-left: 168rpx;">欧气值</text>
			</view>
			<view class="list">
				<view class="list_item" v-for="(item2,index2) in rankingList" :key="index2" :class="index2 === 0 ? 'bg1' : index2 === 1 ? 'bg2' : index2 === 2 ? 'bg3' : ''">
					<view class="list_item_ranking">
						<text v-if="index2 > 2">{{index2+1}}</text>
						<image src="/static/images/blindbox/goldmedal.png" v-if="index2 === 0"></image>
						<image src="/static/images/blindbox/silvermedal.png" v-if="index2 === 1"></image>
						<image src="/static/images/blindbox/bronzemedal.png" v-if="index2 === 2"></image>
					</view>
					<view class="list_item_user">
						<image :src="item2.avatar"></image>
						<text>{{item2.user_name}}</text>
					</view>
					<view class="list_item_price">￥{{item2.consume_price || 0}}</view>
					<view class="list_item_name2">
						<image :src="item2.activity_cover_image"></image>
						<text>{{item2.activity_name}}</text>
						<text>￥{{item2.first_blood || 0}}</text>
					</view>
					<view class="list_item_ouqinum">{{item2.air_total_num || 0}}</view>
					<view class="list_item_open">
						<text class="list_item_open_btn" @click="absorbOuqi(item2)">吸欧气</text>
						<text class="list_item_open_num">已吸取{{item2.air_num || 0}}</text>
					</view>
				</view>
			</view>
		</template>
		<overlay showSlot ref="reward">
			<view class="reward">
				<view class="reward_title">恭喜您</view>
				<view class="reward_content">
					成功吸取对方<text>{{airNum}}</text>点欧气值！
				</view>
				<view class="reward_text">欧气值自动转化为心愿币</view>
				<view class="reward_text">请继续加油哦!</view>
			</view>
		</overlay>
	</view>
</template>

<script>
	import overlay from '@/components/overlay'
	export default {
		components:{
			overlay
		},
		data() {
			return {
				active:0,//当前排行 0.欧气榜 1.欧皇榜
				rankList:[],//欧气榜
				rankingList:[],//欧皇榜
				airNum:'',//吸取到的欧气值
				airRate:''//欧气值变心愿币比例
			}
		},
		onLoad() {
			this.getRankList();
			this.getRankingList();
			this.getAirrate();
		},
		methods: {
			// 欧气榜
			getRankList(){
				this.$api.stermgoodlucklist({type:1}).then(res=>{
					this.rankList = res;
				})
			},
			// 欧皇榜
			getRankingList(){
				this.$api.stermgoodlucklist({type:2}).then(res=>{
					this.rankingList = res;
				})
			},
			// 欧气值变心愿币比例
			getAirrate(){
				this.$api.stermairrate().then(res=>{
					this.airRate = res;
				})
			},
			// 吸欧气
			absorbOuqi(item){
				this.$api.stermair({
					air:item.air_total_num,
					to_user_id:item.users_id
				}).then(res=>{
					this.airNum = res;
					this.$refs.reward.show();
					this.getRankingList();
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-top: 546rpx;
}
.topnav{
	width: 750rpx;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	z-index: 99;
	padding-top: 100rpx;
	
	.nav{
		width: 750rpx;
		@include between;
		position: absolute;
		top: 130rpx;
		left: 50rpx;
		z-index: 999;
		
		navigator{
			@include center;
			
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.mainbg{
		width: 750rpx;
		height: 626rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.todayouqi{
		width: 360rpx;
		height: 48rpx;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0 2rpx 4rpx 2rpx rgba(105, 22, 255, 0.29);
		border-radius: 48rpx;
		border: 2rpx solid #FFFFFF;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #520BFF;
		@include center;
		position: absolute;
		top: 470rpx;
		left: 196rpx;
	}
	.toptitle{
		width: 750rpx;
		height: 78rpx;
		background: linear-gradient(180deg, #A99CFC 0%, #6249FE 100%);
		border-radius: 4rpx 4rpx 0 0;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		@include between-end;
		position: absolute;
		top: 548rpx;
		left: 0;
		
		&_item{
			width: 375rpx;
			height: 78rpx;
			@include center;
		}
		.active1{
			width: 384rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #DFA563 0%, #E3B784 41%, #E8D1B5 100%);
			border-radius: 4rpx 4rpx 0 0;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #7C5223;
			position: relative;
			
			&::after{
				content: '';
				border-top:88rpx solid transparent;
				border-left:40rpx solid #E8D1B5;
				position: absolute;
				right: -40rpx;
			}
		}
		.active2{
			width: 384rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #DFA563 0%, #E3B784 41%, #E8D1B5 100%);
			border-radius: 4rpx 4rpx 0 0;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #7C5223;
			position: relative;
			
			&::before{
				content: '';
				border-top:88rpx solid transparent;
				border-right:40rpx solid #DFA563;
				position: absolute;
				left: -40rpx;
			}
		}
	}
}
.title{
	width: 750rpx;
	height: 80rpx;
	background: #EBE7F9;
	box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);
	padding: 20rpx 32rpx;
	margin-top: 80rpx;
	
	text{
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #3A3A3A;
	}
}
.list{
	
	&_item{
		@include between;
		padding: 20rpx 32rpx 20rpx 26rpx;
		border: 1rpx solid #EEEEEE;
		
		&_ranking{
			width: 84rpx;
			
			text{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				padding-left: 32rpx
			}
			image{
				width: 84rpx;
				height: 64rpx;
			}
		}
		&_name1{
			@include column-center;
			
			image{
				width: 98rpx;
				height: 98rpx;
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				width: 120rpx;
				@include two;
			}
		}
		&_name2{
			@include column-center;
			transform: translateX(-20rpx);
			
			image{
				width: 72rpx;
				height: 70rpx;
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				width: 80rpx;
				@include one;
			}
		}
		&_user{
			@include column-center;
			
			image{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 12rpx;
				width: 90rpx;
				@include one;
			}
		}
		&_price{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FF3B30;
			width: 160rpx;
			@include one;
		}
		&_ouqinum{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF3B30;
			width: 110rpx;
			@include one;
			text-align: center;
			transform: translateX(-15rpx)
		}
		&_open{
			@include column-center;
			
			&_btn{
				width: 120rpx;
				height: 49rpx;
				background: #FFE5E3;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF1605;
				@include center;
			}
			&_num{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 18rpx;
				width: 150rpx;
				@include one;
				text-align: center;
			}
		}
	}
}
.bg1{
	background: linear-gradient(#FEFEFF,#FFFCF2);
}
.bg2{
	background: linear-gradient(#FEFEFF,#F2F3FF);
}
.bg3{
	background: linear-gradient(#FEFEFF,#F2F8FF);
}
.reward{
	width: 530rpx;
	height: 442rpx;
	background-image: url();
	background-size: cover;
	text-align: center;
	padding-top: 14rpx;
	
	&_title{
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1A2294;
	}
	&_content{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin: 78rpx auto 68rpx;
		
		text{
			font-size: 48rpx;
			margin: 0 10rpx;
		}
	}
	&_text{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-bottom: 40rpx;
	}
}
</style>
